<template>
  <div class="user-setting-shell">
    <div class="return-nav">
      <arrow-left style="width: 1rem;"/>
      <button @click="$router.push('/user')"> 返回个人主页</button>
    </div>
    <div class="user-setting-container">
      <div class="options">
        <ul>
          <li :class="{active: item.active}"
              v-for="item in options" :key="item.name"
              @click="switchOption(item)"
          >
            <svg class="icon">
              <use :xlink:href="item.icon"></use>
            </svg>
            {{item.name}}
          </li>
        </ul>
      </div>
      <div class="setting-router-view">
        <header>{{settingTitle}}</header>
        <router-view></router-view>
      </div>
    </div>
  </div>

</template>

<script setup>
import {ref} from 'vue'
import {ArrowLeft} from '@element-plus/icons-vue'
import {useUserStore} from "@/store/userStore.js";
import router from "@/router/router.js";

const userStore = useUserStore();

/**
 * 设置选项
 */
let options = ref([
  {name: '个人资料', icon: '#icon-gerenziliao', active: true, path: 'profile'},
  {name: '账号设置', icon: '#icon-yonghu', active: false, path: 'account'},
  {name: '通用设置', icon: '#icon-shezhi', active: false, path: 'common'},
  {name: '消息设置', icon: '#icon-xiaoxi', active: false, path: 'message'},
])
let settingTitle = ref('个人资料')
function switchOption(item) {
  options.value.forEach(o => o.active = false)
  item.active = true
  settingTitle.value = item.name
  router.push('/setting/'+item.path)
}
</script>

<style lang="scss" scoped>
@import "@/styles/var";

.user-setting-shell {
  width: 80%;
  max-width: $width-view-max;
  background-color: transparent;
  margin: 1rem 0 auto;

  .return-nav {
    margin-bottom: 1rem;
    padding: 0.8rem;
    border-radius: 5px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    color: $color-theme;

    button {
      cursor: pointer;
      color: $color-theme;
      background-color: transparent;
    }
  }

  .user-setting-container {
    display: flex;

    .options {
      width: 25%;
      margin-right: 1rem;
      border-radius: 5px;
      padding: 1rem;
      background-color: #ffffff;
    }

    .setting-router-view {
      width: 75%;
      border-radius: 5px;
      background-color: #ffffff;
    }
  }
}

.options {
  ul {
    color: $color-black-text;

    li {
      padding: 1rem;
      border-radius: 5px;
      cursor: pointer;

      .icon {
        margin-right: 1rem;
      }
    }

    li:hover, .active {
      background-color: $color-light-0;
      color: $color-theme;
    }
  }
}

.setting-router-view {
  header {
    font-size: 1.2rem;
    padding: 1rem;
    border-bottom: 1px solid $color-border-light;
  }
}

</style>